<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务1</title>
    <style>
        tr,th,td{
            text-align: center;
			margin: 0 auto;
			width: 200px;
            height: 50px;
        }
		table{
			text-align: center;
            margin: 0 auto;
		}
        div{
            text-align: center;
            margin: 0 auto;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" name="name" placeholder="请输入姓名">
        <input type="text" name="age" placeholder="请输入年龄">
        <input type="text" name="address" placeholder="请输入地址">
        <button onclick="add()">添加</button>
    </div>    
 
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" onclick="selectAll(this.checked)">全选</th>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input name="season" type="checkbox" checked="checked"></td>
				<td>1</td>
				<td>admin</td>
				<td>23</td>
				<td>6666</td>
				<td><input type="button" value="删除" onClick="del()" /></td>
			</tr>
			<tr>
				<td><input name="season" type="checkbox" checked="checked"></td>
				<td>2</td>
				<td>admin</td>
				<td>23</td>
				<td>6666</td>
				<td><input type="button" value="删除" onClick="del()" /></td>
			</tr>
			<tr>
				<td><input name="season" type="checkbox" checked="checked"></td>
				<td>3</td>
				<td>admin</td>
				<td>23</td>
				<td>6666</td>
				<td><input type="button" value="删除" onClick="del()" /></td>
			</tr>
            <tr>
				<td><input name="season" type="checkbox" checked="checked"></td>
				<td>4</td>
				<td>admin</td>
				<td>23</td>
				<td>6666</td>
				<td><input type="button" value="删除" onClick="del()" /></td>
			</tr>
            <tr>
				<td><input name="season" type="checkbox" checked="checked"></td>
				<td>5</td>
				<td>admin</td>
				<td>23</td>
				<td>6666</td>
				<td><input type="button" value="删除" onClick="del()" /></td>
			</tr>
        </tbody>
    </table>

    <script>

        var tbody = document.getElementsByTagName("tbody")[0];
 
        function add(){
            var name = document.getElementsByName("name")[0].value;
            var age = document.getElementsByName("age")[0].value;
            var address = document.getElementsByName("address")[0].value;
            var num = document.getElementsByTagName("tr").length;
            template(num,name,age,address);
        }

        function template(num,name,age,address){
            tbody.innerHTML += `<tr>
                <td><input type="checkbox"></td>
                <td>${num}</td>
                <td>${name}</td>
                <td>${age}</td>
                <td>${address}</td>
                <td><button onclick="del(this)">删除</button></td>
            </tr>`;
        }

        function del(el){
            if(confirm("确定删除本条数据?")){
                el.parentElement.parentElement.remove();
            }
        }

        function selectAll(value){ 
            var checkboxs = document.querySelectorAll("input[type='checkbox']");
            for(var i=1;i<checkboxs.length;i++){
                checkboxs[i].checked = value; //复选框 使用checked判断是否选中  下拉列表使用 selected 是否选中某一条数据
                checkboxs[i].addEventListener("click",function(e){
                    checkboxs[0].checked = e.checked;                    
                });
            }
        }     
        //全选 子元素全部选上了，全选框自动选上，批量删除
    </script>
</body>
</html>